import React, { Component } from 'react'
import { View, Text, TextInput, StyleSheet, FlatList } from 'react-native'

// export default class PizzaTranslator extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       text: ''
//     }
//   }
//   render() {
//     return (
//       <View style={{padding: 10}}>
//         <TextInput style={{height: 40}} placeholder='请输入所要转换的文字' onchangeText={(text) => this.setState({text})} />
//         <Text style={{padding: 10, fontSize: 42}}>
//           {this.state.text.split(' ').map((word)=>word && '🍕').join(' ')}
//         </Text>
//       </View>
//     )
//   }
// }

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }
  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
        <Text>分割线分割线分割线分割线分割线分割线分割线</Text>
        <View style={styles.container}>
          <FlatList
            data={[
              {key: 'Devin'},
              {key: 'Jackson'},
              {key: 'James'},
              {key: 'Joel'},
              {key: 'John'},
              {key: 'Jillian'},
              {key: 'Jimmy'},
              {key: 'Julie'},
            ]}
            renderItem={({item}) => <Text style={styles.item}>{item.key}yiya一压咿呀</Text>}
          />
        </View>
        <View>
          <Text>我是长列表后面的数据我是长列表后面的数据我是长列表后面的数据</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22,
   height: 300
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})